<template>
  <div>
    <div id="myCharts" ref="myCharts" :style="{ width: width+'px', height: height + 'px' }"></div>
  </div>
</template>

<script lang="ts">
import echarts from "echarts";
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({
  name: "echarts"
})
export default class extends Vue {
  @Prop({ default: {} }) private options!: {};
  @Prop({ default: 450 }) private width!: {};
  @Prop({ default: 400 }) private height!: {};
  mounted() {
    const myCharts = echarts.init((this.$refs as any).myCharts);
    const options = this.options;
    myCharts.setOption(options);
  }
}
</script>